<template>
  <mt-popup class="machinesDetailPopup"
            v-model="popupVisible" :closeOnClickModal="closeOnClickModal">
    <div @click="popupHide"
         class="zhk-alert_close"></div>
    <div class="head">{{infoTitle}}</div>
    <div class="ct">
      <div class="machines-info">
        <ul>
          <li>
            <span class="label">机具类型</span>
            <span class="value">{{machinesInfo.type}}</span>
          </li>
          <li @click="doCopy(machinesInfo.machineToolSn)">
            <span class="label">设备序列号</span>
            <span class="value">{{machinesInfo.machineToolSn}}</span>
          </li>
          <li>
            <span class="label">所属门店</span>
            <span class="value">{{machinesInfo.shopName}}</span>
          </li>
          <li @click="doCopy(machinesInfo.orderId)">
            <span class="label">订单编号</span>
            <span class="value">{{machinesInfo.orderId}}</span>
          </li>
        </ul>
      </div>
      <div class="logistics-info"
           v-if="machinesInfo.logisticsName||machinesInfo.logisticsCode">
        <ul>
          <li>
            <span class="label">物流公司</span>
            <span class="value">{{machinesInfo.logisticsName}}</span>
          </li>
          <li v-if="machinesInfo.logisticsCode" @click="doCopy(machinesInfo.logisticsCode)">
            <span class="label">物流单号</span>
            <span class="value">{{machinesInfo.logisticsCode}}</span>
          </li>
        </ul>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import { Popup, Toast } from "mint-ui";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);
Vue.component(Popup.name, Popup);
export default {
  name: "machinesDetailPopup",
  data() {
    return {
      popupVisible: false,
      closeOnClickModal:false
    };
  },
  props: {
    infoTitle: {
      type: String
    },
    machinesInfo: {
      type: Object
    }
  },
  mounted() {
    this.popupVisible = true;
    document.body.appendChild(this.$el);
  },
  methods: {
    doCopy(content) {
      if(!content){
        return;
      }
      this.$copyText(content).then(
        e => {
          Toast("复制成功");
        },
        e => {
          Toast("您的系统版本过低,请长按手动复制");
        }
      );
    },
    popupHide() {
      this.$emit("listenToMachinesDetailPopupHide");
    }
  },
  beforeDestroy() {
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "machinesDetailPopup";
</style>
